import React, { Fragment, useEffect, useState} from 'react';
import {PageHeaderWrapper} from '@ant-design/pro-layout';
import { Button, Card, Divider, Form, message, Table } from 'antd';
import styles from '@/utils/table.less';
import {ColumnProps} from 'antd/lib/table';
import {PropertiesMeta} from '../component/data.d';
import {FormComponentProps} from 'antd/es/form';
import Save from '../label/add/edit';
import apis from '@/services';

interface Props extends FormComponentProps  {
    loading: boolean;
    data:any[];
}
interface State {
    data: PropertiesMeta[];
    current: Partial<PropertiesMeta>;
    saveVisible: boolean;
    units: any; 
}
const LabelModel: React.FC<Props> = (props: Props) => {
  const initState: State = {
      data: props.data,
      current: {},
      saveVisible: false,
      units: {},
  };
  const [saveVisible, setSaveVisible] = useState(initState.saveVisible);
  const [data, setData] = useState(initState.data);
  const [current, setCurrent] = useState(initState.current);
  const [units, setUnits] = useState(initState.units);
  const handleSearch=()=>{
    apis.deviceProdcut.getLabelData().then((response: any) => {
      if (response.status === 200) {
        setData(response.result);
      }
    }).catch(() => {});
  };
  const saveOrUpdate = (item:PropertiesMeta)=>{
    apis.deviceProdcut.saveLabels(item).then((response: any) => {
      if (response.status === 200) {
          message.success("操作成功");
          setSaveVisible(false);
          handleSearch();
          setCurrent({})
      }
    }).catch(() => {});

  };
  const editItem = (item: any) => {
    let val = JSON.parse(item.jsonStr);
    setSaveVisible(true);
    setCurrent(val);
  };
  const deleteItem = (item: any) => {
    apis.deviceProdcut.delLabels(item.id).then((response: any) => {
      if (response.status === 200) {
          message.success("删除成功");
          handleSearch();
      }
    }).catch(() => {});
  };
  useEffect(() => {
    handleSearch();
    apis.deviceProdcut.units().then((response: any) => {
      if (response.status === 200) {
        setUnits(response.result);
      }
    }).catch(() => {
  });
  }, []);
  const columns: ColumnProps<PropertiesMeta>[] = [
      {
        title: '属性标识',
        dataIndex: 'id',
      },
      {
        title: '属性名称',
        dataIndex: 'tagName',
      },
      {
        title: '数据类型',
        dataIndex: 'type'
      },
      // {
      //   title: '是否只读',
      //   dataIndex: 'expands.readOnly',
      //   render: text => (text === 'true' ? '是' : '否'),
      // },
      {
        title: '说明',
        dataIndex: 'description',
      },
      {
        title: '操作',
        render: (text, record) => (
          <Fragment>
            <a onClick={() => editItem(record)}>编辑</a>
            <Divider type="vertical"/>
            <a onClick={() => deleteItem(record)}>删除</a>
          </Fragment>
        ),
      },
    ];
    return (
        <PageHeaderWrapper title="默认标签">
            <Card bordered={false} style={{ marginBottom: 16 }}>
                <div className={styles.tableListOperator}>
                    <Button type="primary" onClick={() => {
                        setCurrent({});
                        setSaveVisible(true);
                        }}>添加
                    </Button>
                </div>
            </Card>
            <Card bordered={false}>
                <Table rowKey="id" columns={columns} dataSource={data}/>
            </Card>
            {saveVisible && (
            <Save
              data={current}
              unitsData={units}
              save={(item: PropertiesMeta) => {saveOrUpdate(item)}}
              close={() => {setSaveVisible(false);setCurrent({});}}
            />
        )}
        </PageHeaderWrapper>
    )
}
export default Form.create<Props>()(LabelModel);
